<script setup>
import { onMounted, onUnmounted, ref, computed, nextTick } from "vue";
import navigationSmall from "@/components/navigationSmall.vue";
import { useRouter } from "vue-router";
import { getCharactersData, getPageAssets } from "./api.js";
const router = useRouter();

// 定义背景图片变量
const PageAssets = ref("");

const CharactersData = ref([]);
const currentIndex = ref(0);
const showAll = ref(false);
const currentCharacter = computed(
    () => CharactersData.value[currentIndex.value] || {}
);
const avatarListRef = ref(null);
const showAllBtnRef = ref(null);
const showVideoDialog = ref(false);

function handleVideoClick() {
    showVideoDialog.value = true;
}

function closeVideoDialog() {
    showVideoDialog.value = false;
}
function handleWheel(e) {
    if (e.deltaY < 0) {
        router.push("/photo-album");
    }
}

function selectCharacter(index) {
    currentIndex.value = index;
}
function toggleShowAll() {
    showAll.value = !showAll.value;
    if (showAll.value) {
        nextTick(() => {
            document.addEventListener("mousedown", handleOutsideClick);
        });
    } else {
        document.removeEventListener("mousedown", handleOutsideClick);
    }
}
function handleOutsideClick(e) {
    // 如果点击的是收起按钮，则不收起列表
    if (
        (avatarListRef.value && avatarListRef.value.contains(e.target)) ||
        (showAllBtnRef.value && showAllBtnRef.value.contains(e.target))
    ) {
        return;
    }
    showAll.value = false;
    document.removeEventListener("mousedown", handleOutsideClick);
}

onMounted(async () => {
    CharactersData.value = await getCharactersData();
    PageAssets.value = await getPageAssets();
    window.addEventListener("wheel", handleWheel);
});
onUnmounted(() => {
    window.removeEventListener("wheel", handleWheel);
    document.removeEventListener("mousedown", handleOutsideClick);
});
</script>
<template>
    <div class="Characters">
        <video
            class="bgVideo"
            autoplay
            loop
            muted
            :key="currentCharacter.bgVideo"
        >
            <source :src="currentCharacter.bgVideo" type="video/mp4" />
        </video>
        <img class="leftImg" :src="currentCharacter.leftImg" alt="" />
        <div
            class="text-leftBottom"
            :style="{
                background: `url('${PageAssets.characterLeftTextBg}') rgba(30,30,30,0)`,
                backgroundSize: '100% 100%',
            }"
        >
            <h1 class="name">{{ currentCharacter.name }}</h1>
            <h3 class="title">{{ currentCharacter.title }}</h3>
            <p class="desc">{{ currentCharacter.desc }}</p>
        </div>
        <!-- 常驻头像 -->
        <div class="avatar-topRight-bar">
            <div class="avatar-complete-topRight">
                <img class="avatar" :src="currentCharacter.avatar" alt="" />
                <img class="frameImg" :src="currentCharacter.frameImg" alt="" />
                <p class="name">{{ currentCharacter.name }}</p>
            </div>
            <button
                class="showAllBtn"
                ref="showAllBtnRef"
                @click.stop="toggleShowAll"
            >
                <img
                    v-if="showAll"
                    src="https://saas.chatbot.cn/download/minio/standard/2025-10-25/1a224fe15e544825a7fdd1c3dd166cb1.png"
                    alt=""
                />
                <img
                    v-else
                    src="https://www.yn12377.cn/jubao/upload/smjb/2025/10/25/8b733257c7f24ca98bddf3818f583a82.png"
                    alt=""
                />
                <p>{{ showAll ? "收起列表" : "查看更多" }}</p>
            </button>
        </div>
        <!-- 出的头像列表 -->
        <transition name="avatarList-slide">
            <div
                v-if="showAll"
                class="avatarList"
                ref="avatarListRef"
                :style="{
                    background: `url('${PageAssets.characterAvatarList}') rgba(30,30,30,0)`,
                    backgroundSize: '100% 100%',
                }"
            >
                <div
                    v-for="(item, idx) in CharactersData"
                    :key="item.id"
                    class="avatar-complete"
                    :class="{ active: idx === currentIndex.value }"
                    @click="selectCharacter(idx)"
                >
                    <img class="avatar" :src="item.avatar" alt="" />
                    <img class="frameImg" :src="item.frameImg" alt="" />
                    <p class="name">{{ item.name }}</p>
                </div>
            </div>
        </transition>
        <div
            class="right-complete"
            :style="{
                background: `url('${PageAssets.characterRightVideoBg}') rgba(30,30,30,0)`,
                backgroundSize: '100% 100%',
            }"
        >
            <video
                class="videoRight"
                :src="currentCharacter.videoRight"
                controls
                @click="handleVideoClick"
            ></video>
            <h3 class="rightText">{{ currentCharacter.rightText }}</h3>
        </div>
        <navigationSmall :top="'0rem'" :right="'1rem'" :bgHeight="'45rem'" />
        <!-- 放大视频弹窗 -->
        <div
            v-if="showVideoDialog"
            class="video-dialog-mask"
            @click="closeVideoDialog"
        >
            <div class="video-dialog" @click.stop>
                <video
                    :src="currentCharacter.videoRight"
                    controls
                    autoplay
                    style="
                        width: 80vw;
                        height: 45vw;
                        max-width: 1200px;
                        max-height: 700px;
                        background: #000;
                    "
                ></video>
            </div>
        </div>
    </div>
</template>
<style lang='scss' scoped>
.Characters {
    width: 100%;
    height: 100%;
    .bgVideo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .leftImg {
        position: absolute;
        top: 0;
        left: 0;
        height: 50%;
        object-fit: cover;
    }
    .text-leftBottom {
        position: absolute;
        bottom: 6rem;
        left: 5rem;
        height: 35rem;
        width: 20rem;
        color: #fff;
        padding: 4rem;
        background-size: 100% 100%;
        display: flex;
        align-items: flex-start;
        h1 {
            font-size: 4rem;
            margin: 0;
            writing-mode: vertical-rl;
            text-shadow: 4px 4px 16px #000a, 0 0 2px #000, 0 0 4px #000;
            align-self: flex-start;
        }
        h3 {
            font-size: 2.5rem;
            margin: 0.5rem 0;
            writing-mode: vertical-rl;
            text-shadow: 4px 4px 16px #000a, 0 0 2px #000, 0 0 4px #000;
            align-self: flex-start;
        }
        p {
            font-size: 2rem;
            margin: 0.5rem 0;
            max-width: 30rem;
            writing-mode: vertical-lr;
            text-shadow: 2px 2px 12px #000a, 0 0 2px #000, 0 0 4px #000;
            align-self: center;
        }
    }
    .avatar-topRight-bar {
        position: absolute;
        top: 2rem;
        right: 5rem;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        z-index: 10;
        .avatar-complete-topRight {
            width: 8rem;
            height: 8rem;
            padding: 1rem;
            position: relative;
            .avatar {
                width: 100%;
                height: 100%;
            }
            .frameImg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                visibility: visible;
            }
            .name {
                text-align: center;
                color: #fff;
                font-size: 1rem;
                text-shadow: 2px 2px 12px #000a, 0 0 2px #000, 0 0 4px #000;
                font-weight: 700;
            }
        }
        .showAllBtn {
            font-family: "FangSong", "FangSong_GB2312", "STFangsong", "仿宋",
                serif;
            margin-left: 1rem;
            background: rgba(30, 30, 30, 0);
            border: none;
            color: #fff;
            font-weight: 700;
            text-shadow: 2px 2px 12px #000a, 0 0 2px #000, 0 0 4px #000;
            cursor: pointer;
            font-size: 1rem;
        }
    }
    .avatarList {
        position: absolute;
        right: 5rem;
        top: 10rem;
        width: 20%;
        height: 80%;
        padding: 5rem;
        background-size: 100% 100%;
        display: flex;
        gap: 1rem;
        z-index: 20;
        flex-wrap: wrap;
        justify-content: center;
        .avatar-complete {
            width: 6rem;
            height: 6rem;
            padding: 0.6rem;
            cursor: pointer;
            position: relative;
            border-radius: 0.5rem;
            transition: box-shadow 0.2s;
            &:hover {
                box-shadow: 0 0 10px #fff;
                .frameImg {
                    visibility: visible;
                }
                .name {
                    color: #ffea62;
                }
            }
            .avatar {
                width: 100%;
                height: 100%;
                border-radius: 0.5rem;
            }
            .frameImg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                visibility: hidden;
            }
            .name {
                text-align: center;
                color: #ffffff;
                font-size: 0.9rem;
                text-shadow: 2px 2px 12px #000a, 0 0 2px #000, 0 0 4px #000;
                font-weight: 700;
            }
        }
    }
    .right-complete {
        position: absolute;
        right: 10rem;
        top: 50%;
        transform: translateY(-50%);
        width: 30rem;
        padding: 3rem;
        background-size: 100% 100%;
        .videoRight {
            width: 100%;
        }
    }
    .video-dialog-mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .video-dialog {
        position: relative;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* 头像列表弹出动画 */
.avatarList-slide-enter-active,
.avatarList-slide-leave-active {
    transition: all 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}
.avatarList-slide-enter-from,
.avatarList-slide-leave-to {
    opacity: 0;
    transform: translateY(100px) translateX(0%);
}
.avatarList-slide-enter-to,
.avatarList-slide-leave-from {
    opacity: 1;
    transform: translateY(0) translateX(0%);
}
</style>